<template>
	<view>
		<view :class="[showSpred?'tui-modal-mask':'']" v-if="showSpred">
			<view class="spread-box" v-if="showInfo.spreadTailImg">
				<template v-if="loadImgSuccess">
					<view class="close-text">
						<view class="no-text">
							<!-- <i class="iconfont iconguanbi1 close"></i> -->
							<span>{{num}}</span>
						</view>
					</view>
				</template>
				<image v-show="loadImgSuccess" :lazy-load="true" mode="widthFix" :src="baseUrl+showInfo.spreadTailImg" @tap="jumpToPage" @load="loadImageSuccess"></image>
				<view v-if="loadImgSuccess" class="iconfont iconguanbi1 icon-close" @tap="closeSpred"></view>
			</view>
		</view>
		<auto-receive-coupon :show.sync="showCoupon" :idList="couponIdList"></auto-receive-coupon>
	</view>
</template>

<script>
	import autoReceiveCoupon from '@/components/autoReceiveCoupon/autoReceiveCoupon.vue'

	export default {
		name: "spreadTail",
		props: ['isInitSpred', 'memberFlag','showInfo'],
		components: {
			autoReceiveCoupon
		},
		data() {
			return {
				loadImgSuccess:false,
				baseUrl: this.$store.state.imgUrl,
				num: 5,
				// showInfo: {},
				showSpred: false,
				timer: null,
				openTime: '',
				showCoupon: false,
				couponIdList: [],
			};
		},
		watch:{
			showInfo(val) {
				if(val != null) {
					if (this.$store.state.spreadInitFlag) {
						this.$store.commit('setSpreadInitFlag',false);
						this.openTime = new Date();
						if (val.useFlag == 0) {
							//全部
							this.isShow();
						} else if (val.useFlag == 1 && !this.memberFlag) {
							//顾客
							this.isShow();
						} else if (val.useFlag == 2 && this.memberFlag) {
							//会员
							this.isShow();
						}
					}
				}
			},
		},
		methods: {
			loadImageSuccess() {
				// this.loadImgSuccess = true;
				if (this.showSpred) {
					this.loadImgSuccess = true;
					this.timer = setInterval(() => {
						this.num -= 1;
						if (this.num == 0) {
							this.showSpred = false;
							clearInterval(this.timer);
						}
					}, 1000)
				}
			},
			isShow() {
				// 判断当前时间是否在规定时间范围内
				if (this.isDuringDate(this.showInfo.startTime, this.showInfo.endTime)) {
					const time = uni.getStorageSync('timeStemp');
					const nowTime = this.openTime.getTime();
					if (!time && this.showInfo.frequency != 0) {
						// 记录时间戳
						uni.setStorageSync('timeStemp', nowTime);
						this.showSpred = true;
						return;
					}

					if (this.showInfo.frequency == 0) {
						// 开屏频率每次
						this.showSpred = true;
					} else if (this.showInfo.frequency == 1) {
						// 开屏频率每天
						const dis = parseInt((nowTime - time) / 1000 / 60 / 60 / 24);
						if (dis >= 1) {
							this.showSpred = true;
							uni.setStorageSync('timeStemp', nowTime);
						} else {
							this.showSpred = false;
						}
					} else {
						// 开屏频率每月
						if (this.openTime.getFullYear() == new Date(time).getFullYear() && this.openTime.getMonth() == new Date(time).getMonth()) {
							this.showSpred = false;
						} else {
							this.showSpred = true;
							uni.setStorageSync('timeStemp', nowTime);
						}
					}
				} else {
					// 当前时间不在规定时间范围内
					this.showSpred = false;
				}
			},
			jumpToPage() {
				if (!this.showInfo.spreadTailUrl) {
					this.showSpred = false;
				} else {
					console.log(this.showInfo.urlType);
					if (this.showInfo.urlType == 0) {
						// 商品分组
						uni.navigateTo({
							url: `/pages/category/category?subCategoryId=${this.showInfo.spreadTailUrl}`
						})
						this.showSpred = false;
					} else if (this.showInfo.urlType == 1) {
						// 商品详情
						this.$util.gotoGoodsDetail('productId', this.showInfo.spreadTailUrl);
						this.showSpred = false;
					} else if (this.showInfo.urlType == 2) {
						// 固定页面
						uni.navigateTo({
							url: `/packageA/pages/${this.showInfo.spreadTailUrl}`
						})
						this.showSpred = false;
					} else if (this.showInfo.urlType == 3) {
						// 套餐详情
						this.$util.gotoGoodsDetail('suitId', this.showInfo.spreadTailUrl);
						this.showSpred = false;
					} else if (this.showInfo.urlType == 4) {
						// 活动页面
						uni.navigateTo({
							url: `/packageA/pages/activityPage/activityPage?id=${this.showInfo.spreadTailUrl}`
						})
						this.showSpred = false;
					} else if (this.showInfo.urlType == 5) {
						// 优惠券
						const couponId = this.showInfo.spreadTailUrl.split(',');
						this.couponIdList = couponId;
						this.showCoupon = true;
						this.showSpred = false;
					}
				}
			},
			isDuringDate(beginDateStr, endDateStr) {
				const curDate = this.openTime.getTime(),
					beginDate = new Date(beginDateStr.replace(/-/g, '/')).getTime(),
					endDate = new Date(endDateStr.replace(/-/g, '/')).getTime();
				if (curDate >= beginDate && curDate <= endDate) {
					return true;
				}
				return false;
			},
			closeSpred() {
				this.showSpred = false;
			}
		}
	}
</script>

<style lang="scss">
	.tui-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999999;
		display: flex;
		justify-content: center;
		align-items: center;

		.spread-box {
			position: relative;

			.close-text {
				position: absolute;
				top: -20rpx;
				right: 0;
				background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
				border-radius: 20rpx;
				color: #fff;
				padding: 8rpx 20rpx;
				font-size: 26rpx;
				z-index: 9999;

				.no-text {
					display: flex;

					.close {
						margin-right: 8rpx;
					}
				}
			}

			.spread-img {
				width: 640rpx;
				height: 800rpx;
				border-radius: 40rpx;
				margin-bottom: 20rpx;
			}
			
			.icon-close {
				color: #fff;
				font-size: 30px;
				text-align: center;
				margin-top: 20rpx;
			}
		}

	}
</style>
